<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>欢迎使用</title>
	<jsp:include page="include.jsp" />
	<script>
		$(function(){
            //树
            $("#treeId").tree({
                url: 'tree/treeAjax.form?pid=0',
                onBeforeExpand:function(node,param){ 
                    $('#treeId').tree('options').url = "tree/treeAjax.form?pid=" + node.id;// change the url
                },
                onClick:function(node){
                    addTab(node);
				},onLoadSuccess:function(){
					$('#treeId').tree('expandAll');
				}
            });
            //增加tab
            function addTab(node){
                if((node.attributes.url)!=undefined){
					if (node.attributes.url!=''){
	                	if(  $('#tabs').tabs('exists',node.text)){ //判断是否打开
	                        $('#tabs').tabs('select', node.text);
	                    } else {
	                       $('#tabs').tabs('add',{
	                            title: node.text,
	                            //href :node.attributes.url,
	                            //iconCls:'icon-save',
	                             content : "<iframe src='"+ node.attributes.url + "' width=\"100%\" height=\"100%\" scrolling=\"auto\" frameborder=\"0\" style=\"border:0px;padding: 0px\"></iframe>",
	                            closable:true
	                        });
	                     }
					}
                }
            }

            //tabs
			$('#tabs').tabs({
				tools:[{
					iconCls:'icon-cancel',
					handler: function(){
						confirm();
					}
				}]
			});
            //
            function confirm(){
                $.messager.confirm('关闭窗口', '是否要关闭当前的窗口?', function(r){
                    if (r){
                        var options = $("#tabs").tabs('getSelected').panel('options');
                        if (options.closable){
                            var title = options.title;
                            $("#tabs").tabs('close', title);
                        }
                    }
                });
            };
            
            setTimeout(function(){
				$('body').layout('collapse','south');
			},0);
		});
	</script>
</head>
<body class="easyui-layout">

		<div  id="north" region="north"  split="true" style="height:50px;">

		</div>

       <!--暂时不用
		<div id="east" region="east" iconCls="icon-reload" title="说明" split="true" style="width:180px;" >
		</div>
        -->

		<div id="west" region="west" split="true" title="菜单" style="width:220px;padding:1px;overflow:hidden;">
			<div id="accordionTitle" class="easyui-accordion" fit="true" border="false">
				<div title="功能面板" selected="true" >
					<ul id="treeId" class="easyui-tree" ></ul>
				</div>
				<div title="收藏夹">
					收藏夹内容
				</div>
			</div>
		</div>

		<div id="center" region="center" title="欢迎使用" style="overflow:hidden;">
			<div id="tabs" class="easyui-tabs" fit="true" border="false">
				<div title="说明" iconCls="icon-reload" style="padding:20px;overflow:hidden;">
					<div style="margin-top:20px;">
						<h3>这是一个测试程序</h3>
						<li><a href="http://www.jquery.com">jQuery</a> + <a href="http://www.jeasyui.com">easyui</a> 实现的 </li>
					</div>
				</div>
                <!--
                <div title="Tab2" iconCls="icon-reload" closable="true" style="overflow:hidden;padding:5px;">
					<iframe src="index.html" width="100%" height="100%" scrolling="true" style=" border:0px;padding: 0px"></iframe>
				</div>
				-->
			</div>
		</div>

		<div id="south" region="south"   split="true"  style="height:50px;padding:10px;text-align:center;">
			<div>
				版权信息
			</div>
		</div>
</body>
</html>